<template>
  <div class="header">
    <div class="header-left">
      <span class="iconfont">&#xe685;</span>
    </div>
    <div class="header-search">
      <span class="iconfont">&#xe604;</span>
      输入景点/城市/游玩主题
    </div>
    <div class="header-right">
      <router-link to="/city">
        {{city}}
      <span class="iconfont">&#xe615;</span>
      </router-link>
    </div>
  </div>
</template>
<script>
import {mapState} from 'vuex'
export default {
  computed:{
    ...mapState(['city'])
  }
};
</script>
<style scoped>
.header{
    width: 100%;
    height: .88rem;
    line-height: .88rem;
    background-color: #71ebae;
    font-size: .3rem;
    color: #818a99;
    display: flex;
}
.header-search{
    flex:1;
    background-color: white;
    margin: .11rem 0;
    height: .6rem;
    border-radius: .1rem;
    color: rgb(136, 134, 134);
    line-height: .6rem;
    padding-left: .2rem;
}
.header-left{
    width: .4rem;
    padding: 0 .2rem;
    text-align: center;
    font-weight: bold;
}
.header-right{
 color: white;
 font-weight: bold;
 margin: 0 .2rem;
}
.header-right a{
  color: #fff;
}
</style>